<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
</head>

<body>
    <ul></ul>
    <script>
        let ul = document.querySelector('ul');

        axios({
            url: "http://localhost/getHeros",
        }).then(({
            data
        }) => {

            console.log(data);
            let str = data.map(item => `<li><a href="javascript:detail(${item.heroId});">${item.name}</a></li>`).join('');
            ul.innerHTML = str;
        })

        function detail(id) {
            // console.log(id);

            axios({
                url: "http://localhost/getHero",
                params: {
                    id
                }
            }).then(val => {
                console.log(val);
            })

            // axios({
            //     url: "http://localhost/getHeros",
            // }).then(({
            //     data
            // }) => {

            //     console.log(data);
            //     console.log(id);
            //     let detail = data.find(item => item.heroId == id);

            //     console.log(detail);
            // })


        }
    </script>
</body>

</html>